<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>互助平台</title>

  <!-- <link rel="stylesheet" href="assets/css/style-starter.css"> -->

  <link rel="stylesheet" href="assets/css/administrator.css">

  <!-- 引入样式 -->
  <link rel="stylesheet" href="assets/plugins/elementui/index.css">
  <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">

</head>

<body>
  <!--w3l-header-->
  <div id="app">
    <el-container>

        <el-aside width="200px">
          <div class="left">

            <el-row class="tac" style="height: 100%;">
              <el-col :span="12" style="height: 100%;">
                <el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                  background-color="#304156" text-color="#fff" active-text-color="#ffd04b" align="left">
                  <el-menu-item index="" >后端管理系统</el-menu-item>
                    <el-menu-item index="1" @click="index()">
                        <i class="el-icon-menu"></i>
                        <span slot="title" >首页</span>
                    </el-menu-item>
                    <el-submenu index="2" >
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>系统管理</span>
                        </template>
                        <div align="center">
                            <el-menu-item index="2-1" @click="user()">用户管理</el-menu-item>
                            <el-menu-item index="2-2" @click="managePeople()">管理员管理</el-menu-item>
                            <el-menu-item index="2-3"  @click="shop()">商品信息</el-menu-item>
                        </div>
                    </el-submenu>
                    <!-- <el-menu-item index="2">
                      <i class="el-icon-menu"></i>
                      <span slot="title">导航二</span>
                    </el-menu-item> -->
                    <!-- <el-menu-item index="3" disabled>
                      <i class="el-icon-document"></i>
                      <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <i class="el-icon-setting"></i>
                      <span slot="title">导航四</span>
                    </el-menu-item> -->
                    <el-menu-item index="3" @click="contact()">
                        <i class="el-icon-document"></i>
                        <span slot="title" >留言板</span>
                    </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>

        </el-aside>
        <el-main>
          <div class="header">
            <div class="header_name"><a href="manageIndex.html" class="aaaa">首页</a> / 系统管理 / 用户管理</div>
          </div>

          <div class="right">
              <div class="card-panel" href="#icon-peoples">
                  <img class="tubiao" src="assets/images/tubiao1.png" height="60px" width="60px">
                  <div class="tubiaotext">
                      <div class="tubiaotexttop">留言量</div>
                      <div class="tubiaotextbottom">{{contactCount}}条</div>
                  </div>
              </div>
              <div class="card-panel">
                  <img class="tubiao" src="assets/images/tubiao2.png" height="60px" width="60px">
                  <div class="tubiaotext">

                      <div class="tubiaotexttop">用户数</div>
                      <div class="tubiaotextbottom">{{userCount}}</div>
                  </div>
              </div>
              <div class="card-panel">
                  <img class="tubiao" src="assets/images/tubiao3.png" height="60px" width="60px">
                  <div class="tubiaotext">
                      <div class="tubiaotexttop">总交易金额</div>
                      <div class="tubiaotextbottom">{{shopSumPrice}}元</div>
                  </div>
              </div>
              <div class="card-panel">
                  <img class="tubiao" src="assets/images/tubiao4.png" height="60px" width="60px">
                  <div class="tubiaotext">
                      <div class="tubiaotexttop">商品数</div>
                      <div class="tubiaotextbottom">{{shopCount}}件</div>
                  </div>
              </div>

              <!--搜索框-->
              <div class="input_search">
                  <el-row>
                      <el-input v-model="search" placeholder="输入手机号搜索" type="number"  style="width: 200px;"></el-input>
                      <el-button icon="el-icon-search" circle style="margin-left: 20px;" @click="searchPhone()"></el-button>
                  </el-row>
              </div>


            <!-- 用户数据 -->
            <div class="dataTable">
              <template>
                <el-table :data="tableData" style="width: 100%" >
                  <el-table-column label="用户id" width="180" align="center">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="姓名" width="180" align="center">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.name }}</span>
                      <!-- <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                      </el-popover> -->
                    </template>
                  </el-table-column>

                  <el-table-column label="用户手机号" width="180" align="center">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.userId }}</span>
                    </template>
                  </el-table-column>

                    <el-table-column label="用户密码" width="180" align="center">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.password }}</span>
                        </template>
                    </el-table-column>
                  
                  <el-table-column label="用户分数" width="180" align="center">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.score }}分</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="用户代送状态" width="180" align="center">      
                    <template slot-scope="scope">
                          <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="changeStatus(scope.$index,scope.row)">
                          </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="edit(scope.$index, scope.row)">修改</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>


                <!--分页组件-->
                <div class="pagination-container pagin">

                    <el-pagination class="pagiantion" @current-change="handleCurrentChange"
                                   :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                                   layout="total, prev, pager, next, jumper" :total="pagination.total">

                    </el-pagination>

                </div>


            </div>
          </div>
        </el-main>
      
    </el-container>

        <!-- 修改弹窗 -->
        <div class="add-form">
          <el-dialog title="修改" :visible.sync="dialogFormVisibleEdit">
              <el-form :model="table" label-position="right" label-width="100px" :rules="rules" ref="table">

                  <el-row>
                      <el-col :span="12">
                          <el-form-item label="用户姓名" prop="name">
                              <el-input v-model="table.name"/>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="用户手机号" prop="userId"  >
                              <el-input  v-model="table.userId"/>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="12">
                          <el-form-item label="用户分数" prop="score">
                              <el-input v-model.number="table.score"></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="12">
                          <el-form-item label="用户密码" prop="password">
                              <el-input v-model="table.password"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="用户代送状态">
                            <template >
                              <el-switch
                                v-model="table.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                >
                              </el-switch>
                        </template>
                          </el-form-item>
                      </el-col>
                  </el-row>

              </el-form>
              <div slot="footer" class="dialog-footer" align="center">
                  <el-button @click="cancel()">取消</el-button>
                  <el-button type="primary" @click="handleEdit('table')">确定</el-button>
              </div>

          </el-dialog>

        </div>
  </div>


  </script>
  <!-- /move top -->
  </section>

  <!-- jQuery and Bootstrap JS -->
  <script src="assets/js/jquery-3.3.1.min.js"></script>

  <!-- Template JavaScript -->
  <script src="assets/js/jquery.magnific-popup.min.js"></script>


  <script src="assets/js/owl.carousel.js"></script>



  <!-- <script src="assets/js/bootstrap.min.js"></script> -->

  <script src="assets/js/vue.js"></script>

  <script src="assets/plugins/elementui/index.js"></script>

  <script src="assets/js/axios-0.18.0.js"></script>

  <script>

    var vue = new Vue({
      el: '#app',
      data: {
          contactCount: 10000,
          userCount: 10000,
          shopCount: 10000,
          shopSumPrice: 10000,
        table: [],
        dialogFormVisibleEdit: false,
          pagination: {//分页相关模型数据
              currentPage: 1,//当前页码
              pageSize: 5,//每页显示的记录数
              total: 0,//总记录数
          },
        tableData: [{
          id: '01',
          name: '王小虎',
          userId: 1888888888,
          score: 4,
            password: "",
          status: false,
        }, {
          id: '02',
          name: '王小虎',
          userId: '',
          score: 4,
          status: true,
          
        }, {
          id: '02',
          name: '王小虎',
          userId: '',
          score: 2,
          status: false,
        }, {
          id: '02',
          name: '王小虎',
          userId: '',
          score: 1,
          status: true,
        }],

          rules: {
              score: [
                  {required: true, message: '用户分数为必填项', trigger: 'blur'},
                  { min: 0, max: 5,type: 'number', message: '只能输入0-5以内的分数', trigger: 'blur'}

              ],
              userId: [
                  { required: true, message: '手机号为必填项', trigger: 'blur' },
                  {  min: 11, max: 11 , message: '请输入正确的手机号', trigger: 'blur' }
              ],
              password: [
                  { required: true, message: '密码为必填项', trigger: 'blur' },
                  { min: 6, max: 20, message: '密码不少于6位', trigger: 'blur' }
              ],
              name: [
                  { required: true, message: '姓名为必填项', trigger: 'blur' },
                  { min: 1, max: 10, message: '请输入1-10个汉字或字符', trigger: 'blur' }
              ],
          },
          search: "",
      },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAllCount();
            this.getAllUser();
        },

      methods: {
          getAllCount(){
              this.getContactCount();
              this.getUserCount();
              this.getShopCount();
              this.getShopPriceCount();
          },
          getContactCount(){
              axios.get("http://localhost:10010/contacts/count").then((res)=>{
                  this.contactCount=res.data;
              })
          },
          getUserCount(){
              axios.get("http://localhost:10010/users/count").then((res)=>{
                  this.userCount=res.data;
              })
          },
          getShopCount(){
              axios.get("http://localhost:10010/shops/count").then((res)=>{
                  this.shopCount=res.data;
              })
          },
          getShopPriceCount(){
              axios.get("http://localhost:10010/shops/sum/price").then((res)=>{
                  this.shopSumPrice=res.data;
              })
          },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
          //查询用户
          getAllUser(){
            axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
                this.tableData = res.data.records;
                this.pagination.pageSize=res.data.size;
                this.pagination.total=res.data.total;
            })
          },
          //切换页码
          handleCurrentChange(currentPage) {
              this.pagination.currentPage = currentPage;
              this.getAllUser();
          },
        //取消
        cancel() {
                this.dialogFormVisibleEdit = false;
                this.table = {};
                this.$message.info("取消当前操作");
            },
         //修改框处理修改
         handleEdit(table) {
             this.$refs[table].validate((valid) => {
                 if (valid) {
                     axios.put("http://localhost:10010/users", this.table).then((res) => {
                         if (res.data) {
                             this.$message.success("修改成功");
                         } else {
                             this.$message.error("添加失败");
                         }
                     }).finally(() => {
                         this.dialogFormVisibleEdit = false;
                         this.getAllUser();
                     })
                 } else {
                     this.$message.error("表单验证失败");
                     return false;
                 }
             });

            },
          changeStatus(index,row){
              axios.put("http://localhost:10010/users/"+row.id+"/status/"+row.status).then((res) => {
                  if (res.data) {
                      this.$message.success("状态修改成功");
                  } else {
                      this.$message.error("添加失败")
                  }
              }).finally(() => {
                  this.getAllUser();
              })
          },
            //弹出编辑框
            edit(index, row){
              this.table=row;
              this.dialogFormVisibleEdit=true;
              
            },
          user(){
              window.location.href="manageUser.html";
          },
          managePeople(){
              window.location.href="managePeople.html";
          },
          shop(){
              window.location.href="manageShop.html";
          },
          contact(){
              window.location.href="manageContact.html";
          },
          index(){
              window.location.href="manageIndex.html";
          },
          searchPhone(){
              parm="?userId="+this.search;
              axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parm).then((res)=>{
                  this.tableData = res.data.records;
                  this.pagination.pageSize=res.data.size;
                  this.pagination.total=res.data.total;
              })
          }
        
      }
    })


  </script>


</body>

</html>